<template>
    <div>
        <!--当前位置(面包屑)-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
            <el-breadcrumb-item>借款管理</el-breadcrumb-item>
            <el-breadcrumb-item>借款人列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--查询表单--><!-- 1：申请贷款，2：申请成功，3：拒绝贷款 -->
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="searchForm.laName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="searchForm.laMobile"></el-input>
            </el-form-item>
            <el-form-item label="身份证">
                <el-input v-model="searchForm.laIdcard"></el-input>
            </el-form-item>
            <el-form-item label="资方">
                <el-select v-model="searchForm.laInvestorName">
                    <el-option prop="" value=""></el-option>
                    <el-option label="钻石交易金融" value="钻石交易金融"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请状态">
                <el-select v-model="searchForm.laLoadApplicationStatus">
                    <el-option value=""></el-option>
                    <el-option label="申请贷款" value="1"></el-option>
                    <el-option label="拒绝贷款" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">立即搜索</el-button>
            </el-form-item>
        </el-form>
        <!--展示数据表格-->
        <el-table
                :data="loanApplications"
                style="width: 100%">
            <!--
                label	显示的标题
                prop	对应列内容的字段名，也可以使用 property 属性
            -->
            <el-table-column
                    prop="laId"
                    label="id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laUid"
                    label="用户id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laName"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laIdcard"
                    label="身份证"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laMobile"
                    label="手机号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laReceiptNo"
                    label="借据号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laInvestorName"
                    label="资方姓名下拉框"
                    width="180"
            >
            </el-table-column>
            <el-table-column
                    prop="laRepaymentMethod"
                    label="借款方式"
                    width="180"
                    show-overflow-tooltip
                    :formatter="methodFormtype">
            </el-table-column>
            <el-table-column
                    prop="laLoadMoney"
                    label="借款金额"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laStagesNum"
                    label="分期期数"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laLoadStartTime"
                    label="借款发起时间"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laCollectionBankcard"
                    label="收款卡"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laScore"
                    label="信用分"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="laLoadApplicationStatus"
                    label="申请状态"
                    width="180"
                    show-overflow-tooltip
                    :formatter="examineFormtype">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="examine(1,scope.row)" type="text" size="small">通过</el-button>
                    <el-button @click="examine(0,scope.row)" type="text" size="small">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页模块-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[4,8,12,16]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <!--审批的对话框-->
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="centerDialogVisible = false">拒绝申请</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">通过审批</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "LoadUser",
        data() {
            return {
                loanApplications: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                searchForm: {
                    laName: '',//用户的姓名
                    laMobile: '',//手机号
                    laIdcard: '',//身份证
                    laInvestorName: '',//资方
                    laLoadApplicationStatus: ''//审批状态
                },
                a_selected: '',//申请下拉框默认空串
                la_selected: '',//资方下拉框默认空串
                centerDialogVisible: false,
                pageNum: 1,
                pageSize: 4,
                pages: [],
                total: 0,
                prePage: 0,
                nextPage: 0,
            }
        },
        created() {
            this.search();
        },
        methods: {
            search(nowPage) {
                let param = {
                    pageNum: nowPage,
                    pageSize: this.pageSize,
                    laName: this.searchForm.laName,
                    laMobile: this.searchForm.laMobile,
                    laIdcard: this.searchForm.laIdcard,
                    laInvestorName: this.searchForm.laInvestorName,
                    laLoadApplicationStatus: this.searchForm.laLoadApplicationStatus
                };
                console.log(param);
                this.$axios.get(this.$baseUrl + "loanApplication/showLoanAppplications?" + this.$qs.stringify(param)).then((res) => {//参数转为转键值对形式字符串拼接url地址栏
                    this.loanApplications = res.data.data.list;
                    this.pageNum = res.data.data.pageNum;
                    this.pageSize = res.data.data.pageSize;
                    this.pages = res.data.data.pages;
                    this.total = res.data.data.total;
                    this.prePage = res.data.data.prePage;
                    this.nextPage = res.data.data.nextPage
                })
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.search();
            },
            handleCurrentChange(num) {
                this.pageNum = num;
                this.search();
            },
            examineFormtype(row, column, cellValue) {
                if (cellValue == 1) {
                    return '申请贷款';
                } else if (cellValue == 3) {
                    return '拒绝贷款';
                }
            },
            methodFormtype(row, column, cellValue) {
                if (cellValue == 1) {
                    return '按日计息';
                } else if (cellValue == 3) {
                    return '按期计息';
                }
            },
            examine(num, row) {
                let url = this.$baseUrl + "loanApplication/examine"
                this.$axios.put(url, {
                    status: num,
                    lId: row.laId,
                    lUid: row.laUid,
                    lName: row.laName,
                    lIdcard: row.laIdcard,
                    lMobile: row.laMobile,
                    lReceiptNo: row.laReceiptNo,
                    lLoadStatus: row.laLoadApplicationStatus,//借款状态(0已拒绝 1已借款)
                    lInvestorName: row.laInvestorName,
                    lRepaymentMethod: row.laRepaymentMethod,
                    lLoadMoney: row.laLoadMoney,
                    lStagesNum: row.laStagesNum,
                    lLoadStartTime: row.laLoadStartTime,
                    lCollectionBankcard: row.laCollectionBankcard,
                }).then((res) => {
                        console.log(res)
                    })
            }
            /**
             * json与qs的区别:
             {"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
             uid=cs11&pwd=000000als&username=cs11&password=000000als
             */
        }
    }
</script>

<style scoped>

</style>